<template>
  <z-box>
    <z-title name="自定义列表表头、滚动加载"></z-title>
    <el-table border stripe
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" height="350"
      v-table-scroll="lazyLoad"
      ref="scrollTable"
      style="width: 100%; margin-top: 10px;">
      <el-table-column
        label="Date"
        prop="date">
      </el-table-column>
      <el-table-column
        label="Name"
        prop="name">
      </el-table-column>
      <el-table-column
        align="right"
        fixed="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </z-box>
</template>

<script>
export default {
  data() {
    return {
      loadSign: true,
      tableData: [],
      search: '',
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        totalPage: 5
      }
    }
  },
  mounted () {
    this.getTableData()
  },
  watch: {
    // 这里监听获取到数据渲染后，处理加载文字DOM节点
    tableData: {
      handler (val) {
        if (val.length) {
          this.$nextTick(() => {
            let el = this.$refs.scrollTable.$el
            const bodyWrap = el.querySelector('.el-table__body-wrapper')
            // 我这里第一列固定，固定污水池也要生成节点来对齐滚动污水池
            const fixedBodyWrap = el.querySelector('.el-table__fixed-body-wrapper')
            let loadDiv = document.createElement('div')
            let emptyDiv = document.createElement('div')
            loadDiv.className = 'load-text'
            emptyDiv.innerHTML = '.'
            loadDiv.style.textAlign = 'center'
            loadDiv.style.display = 'none'
            emptyDiv.style.visibility = 'hidden'
            const loadTextDom = el.querySelectorAll('.load-text')
            // 未添加节点时添加
            if (!loadTextDom.length) {
              loadDiv.innerHTML = this.page.totalPage > 1 ? '努力加载中(>ω<*)' : '人家是有底线的 (｡･ω･｡)'
              bodyWrap.appendChild(loadDiv)
              if (fixedBodyWrap) {
                fixedBodyWrap.appendChild(emptyDiv)
              }
            }
            // 已生成节点时处理
            if (loadTextDom.length) {
              const loadText = el.querySelector('.load-text')
              loadText.style.display = 'none'
              loadText.innerHTML = this.page.totalPage > 1 ? '努力加载中(>ω<*)' : '人家是有底线的 (｡･ω･｡)'
            }
          })
        }
      },
      deep: false
    }
  },
  methods: {
    lazyLoad () {
      let el = this.$refs.scrollTable.$el
      let loadDiv = el.querySelector('.load-text')
      // loadSign标记 防止重复加载
      if (this.loadSign) {
        loadDiv.style.display = 'block'
        this.page.current++
        // 大于总页数时
        if (this.page.current > this.page.totalPage) {
          loadDiv.innerHTML = '人家是有底线的 (｡･ω･｡)'
          return
        }
        // 这里是接口函数
        this.getTableData()
      }
    },
    getTableData () {
      this.loadSign = false
      setTimeout(() => {
        this.loadSign = true
        const tableData = []
        for (let index = 0; index < 10; index++) {
          const element = {
            date: '2016-05-02',
            name: `王小虎${this.page.current}-${index}`,
            address: '上海市普陀区金沙江路 1518 弄'
          }
          tableData.push(element)
        }
        this.tableData = this.tableData.concat(tableData)
      }, 500);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>

<style>

</style>